import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect, Link } from 'react-router-dom'
import styles from  './styles.less'
import withStyle from '../../withStyle'
import Header from '../../components/Header/index.js'
import {getTagList, getArticleList} from './store/actions.js'
import List from '../../components/List/index.js'
const colorList = [
	"#bed742",
	"#64492b",
	"#ac6767",
	"#1d953f",
	"#ef4136",
	"#375830",
	"#78331e",
	"#f15a22",
	"#6c4c49",
	"#2570a1"
]


class Tag extends Component {

	componentDidMount() {
		this.props.doGetTagList()
	}

	render() {
		return (
			<div className={styles.tag}>
				<Header staticContext={this.props.staticContext}></Header>
				<div className={styles.content}>
					<ul className={styles.tags}>
						{
							this.props.tagList.map((item, index) => {
								return <li key={item._id} style={{backgroundColor: colorList[index], color: "white"}} onClick={() => {this.props.doGetArticleList(item.categoryName)}}>{item.categoryName}</li>
							})
						}	
					</ul>
					<div className={styles.listWrapper}>
						{
							this.props.articleList.length === 0 ? 
								<div className={styles.bigwrapper}>
									<h1 className={styles.title}>Can be complicated, but it is not necessary.</h1>
									<h3 className={styles.says}>Just like background music, simple pure music is great.</h3>
								</div>
							: <List articleList={this.props.articleList}></List>
						}
					</div>
				</div>
			</div>
		)
	}

}

const mapState = (state) => ({
	tagList: state.tag.tagList,
	articleList: state.tag.articleList
})


const mapDispatch = (dispatch) => ({
	doGetTagList() {
		dispatch(getTagList())
	},
	doGetArticleList(tag) {
		dispatch(getArticleList(tag))
	}
})



const TagOut = connect(mapState, mapDispatch)(withStyle(Tag, styles))

TagOut.loadData = (store) => {
	return store.dispatch(getTagList())
}

export default TagOut